<template>
  <div class="app-container">
    <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
    </el-steps>
    <!-- :inline="true" label-width="80px" -->
    <el-form :model="productForm" :rules="productFormRules"  
     ref="productFormRef" >
      <el-tabs v-model="activeIndex" tab-position="left" :before-leave="beforeTabLeave" >
        <el-tab-pane label="基本信息" name="0">
          <product-info :form="productForm" :rules="productFormRules"></product-info>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
        <el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
        <el-tab-pane label="商品图片" name="3">
          <product-picture :model="productForm" :rules="productFormRules"></product-picture>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">
          <product-description :model="productForm" :rules="productFormRules"></product-description>
        </el-tab-pane>
      </el-tabs>

      <el-form-item class="save-btn">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>

    </el-form>
    
    <!-- :form="productForm" -->
    <!--
    <el-tabs v-model="activeIndex" tab-position="left" style="height: 200px;">
      <el-tab-pane label="基本信息" name="0">
        <product-info ></product-info> 
      </el-tab-pane>
      <el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
      <el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
      <el-tab-pane label="商品图片" name="3">商品图片</el-tab-pane>
      <el-tab-pane label="商品内容" name="4">商品内容</el-tab-pane>
    </el-tabs>
    -->
  </div>
</template>

<script>
import { addProduct, updateProduct } from "@/api/catalog/product";  
import ProductInfo from './components/product-info'
import ProductDescription from './components/product-desc'
import ProductPicture from './components/product-picture.vue'
export default {
    name: 'ProductAdd',
    components: {
      ProductInfo,
      ProductDescription,
      ProductPicture
    },
    data () {
      return {
        activeIndex: '0',
        productForm: {
          productId: null,
          productName: null,
          productCode: null,
          alternativeName: null,
          lookup: null,
          categoryId: null,
          coverId: null,
          coverUrl: null,
          specification: null,
          purchaseUnit: null,
          standardUnit: null,
          unboxUnit: null,
          brand: null,
          metaKeywords: null,
          metaTitle: null,
          metaDescription: null,
          sku: null,
          shortDescription: null,
          fullDescription: null,
          vendorId: null,
          salesPrice: null,
          oldSalesPrice: null,
          purchasePrice: null,
          published: 0,
          deleted: 0,
          displayOrder: null,
          createdBy: null,
          createdAt: null,
          updatedBy: null,
          updatedAt: null,

          pictureList: [],
          specificationList: [],
          attributeList: []

        },
        productFormRules:{
          productName: [
            { required: true, message: '请输入活商品动名称', trigger: 'blur' },
            { min: 2, max: 255, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        },
        aaa: ''
      }
    },
    methods: {
      beforeTabLeave(activeName, oldActiveName){
        // console.log('activeName, oldActiveName', activeName, oldActiveName)
      },
      handleEdit () {
        return;
      },
      onSubmit () {
        // console.log('mounted') productFormRef
        this.$refs["productFormRef"].validate(valid => {
          if (!valid) {
            return
          }
          console.log('this.productForm=', this.productForm)
          if (this.productForm.productId != undefined) {
            updateProduct(this.productForm).then(response => {
              this.msgSuccess("修改成功");
              // this.open = false;
              // this.getList();
              this.$router.push('/catalog/product')
            });
          } else {
            addProduct(this.productForm).then(response => {
              this.msgSuccess("新增成功");
              // this.open = false;
              // this.getList();
              this.$router.push('/catalog/product')
            });
          }
        });
      }
    },
    mounted () {
      // console.log('mounted')
    },
    created () {
      // console.log('created')
    }

}
</script>

<style scoped>
.save-btn{
  margin: 20px 105px;
}
</style>